<template>
  <div id="app">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6" :lg="7" :xl="6">
        <h1>欢迎来到东大星问卷系统</h1>
        <el-image
          :src="require('@/assets/images/logo.png')"
          style="width: 175px; height: 210px; margin: 0"
        ></el-image>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical"></el-divider>
      </el-col>

      <el-col :span="6">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          :stretch="true"
          style="margin-bottom: 10%">
          <el-tab-pane label="账号登录" name="first"></el-tab-pane>
          <el-tab-pane label="手机登录" name="second"></el-tab-pane>
        </el-tabs>

        <el-form
          :model="LoginForm"
          :rules="rules"
          ref="LoginForm">

        <el-form style="margin-bottom: 3%;">
          <router-link to="/Register" 
                  style="margin-left:60%;margin-bottom: 10%;">
                  <font size="3px">没有帐号？点我注册</font> 
                </router-link>
        </el-form>

          <el-form-item prop="name">
            <el-input
              v-model="LoginForm.name"
              style="width:90% ;margin-left:5%;float:left" placeholder="请输入用户名"
            ></el-input>
          </el-form-item>

          <el-form-item prop="passwd">
            <el-input
              placeholder="请输入密码"
              v-model="LoginForm.passwd"
              style="width:90% ;margin-left:5%;float:left"
              show-password
            ></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('LoginForm')"
              style="width:90% ;margin-left:5%;float:left"
              >登录</el-button>

          <router-link to="/PasswordFind" 
                  style="margin-left: 5%">
                  <font size="3px">已有帐号，忘记密码？</font> 
                  </router-link>
            <!-- <router-link to="/Register"
              ><el-button>注册</el-button>
            </router-link> -->

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { mapMutations, mapState } from "vuex";

export default {
  name: "Login",
  data() {
    return {
      LoginForm: {
        name: "",
        passwd: "",
      },
      rules: {
        //校验用户名和密码
        name: [
          { required: true, message: "用户名为必填项", trigger: "blur" }, //必填项验证
          { min: 1, max: 12, message: "长度在 1 ~ 12 个字符", trigger: "blur" }, //长度验证
        ],
        passwd: [
          { required: true, message: "用户密码为必填项", trigger: "blur" }, //必填项验证
          { min: 1, max: 10, message: "长度在 1 ~ 10 个字符", trigger: "blur" }, //长度验证
        ],
      },
      activeName: "first",
    };
  },
  methods: {
    ...mapMutations(["saveinfor"]),

    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return; //验证失败
        }

        await this.$http
          .post("/login", this.LoginForm)
          .then((response) => {
            //访问后端
            const res = response.data;
            console.log(res);

            if (res.code == "666") {
              this.$message.success(res.message);
              this.saveinfor(res.data);

              window.sessionStorage.setItem("name", res.data.name);
              window.sessionStorage.setItem("level", res.data.level);
              this.$router.push({ path: "/home" }); //页面路由跳转
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((error) => {
            // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
            // console.log(error);
            if (error.response) {
              // 请求已发出，但服务器响应的状态码不在 2xx 范围内
              console.log(error.response.data);
              console.log(error.response.status);
              console.log(error.response.headers);
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log("请求未发出", error.message);
            }
          });
      });
    },

    handleClick(tab, event) {
      if (this.activeName == "first") {
        this.$router.push("/");
      } else {
        this.$router.push("/Login-Phone");
      }
    },
  },
};
</script>

<style scoped>
.el-row {
  height: 100vh;
  display: flex;
  align-items: center;
}
.el-divider {
  height: 200px;
}

#app {
  background-image: url("@/assets/images/background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>